import Layer from '../core/Layer';
import MultiLine from '../base/MultiLine';
import Point from '../core/Point';
import Color from '../core/Color';
import DashLine from '../base/DashLine';
import Text from '../base/Text';

export default class MultiLineLayer extends Layer {
  constructor(canvas, options) {
    super(canvas);
    this.width = options.width || canvas.width;
    this.height = options.height || canvas.height;
    this.data = options.data || [];
    this.thresholds = options.thresholds || [];
    this.max = options.max;
    this.min = options.min;
    this.xStep = options.xStep || 1;
    this.color = options.color || '#333333';
  }

  make() {
    if (this.data.length === 0) {
      return;
    }
    this.childs.splice(0, this.childs.length);
    const yStep = this.height / (this.max - this.min);
    for (let i = 0; i < this.data.length; i++) {
      let points = [];
      let line = this.data[i];
      for (let j = 0; j < line.data.length; j++) {
        points.push(
          new Point(
            j * this.xStep + this.position.x,
            this.position.y + (line.data[j] - this.min) * yStep
          )
        );
      }
      let multiLine = new MultiLine(this.canvas, points);
      multiLine.setColor(new Color(line.color));
      this.addChild(multiLine);
    }
    for (let i = 0; i < this.thresholds.length; i++) {
      let threshold = this.thresholds[i];
      let dashLine = new DashLine(this.canvas, {
        from: new Point(this.position.x, (threshold - this.min) * yStep),
        to: new Point(this.position.x + this.width, (threshold - this.min) * yStep),
        color: this.color
      });
      this.addChild(dashLine);
      let txt = new Text(this.canvas, {
        text: threshold,
        font: 'PingFang SC',
        size: 24,
        color: this.color
      });
      txt.setPosition(this.position.x, (threshold - this.min) * yStep - 24 * 0.625);
      this.addChild(txt);
    }
  }
}
